<template>
  <div class="singer-card" @click="handleClick">
    <div class="singer-avatar">
      <img 
        :src="singer.avatar || defaultAvatar" 
        :alt="singer.name"
        @error="handleImageError"
      />
    </div>
    <div class="singer-name">
      {{ singer.name }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

interface Singer {
  id: number
  name: string
  avatar?: string
}

interface Props {
  singer: Singer
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: [singer: Singer]
}>()

// 默认头像
const defaultAvatar = ref('/src/assets/images/default-avatar.png')

// 处理图片加载错误
const handleImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  target.src = defaultAvatar.value
}

// 处理点击事件
const handleClick = () => {
  emit('click', props.singer)
}
</script>

<style scoped>
.singer-avatar {
  background-color: #f5f5f5;
  border-radius: 50%;
}
.singer-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  padding: 20px;
  border-radius: 12px;
  width: 180px;
}

.singer-card:hover {
  transform: translateY(-5px);
  opacity: 0.9;
}

.singer-avatar {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease;
}

.singer-avatar:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.singer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.singer-name {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}

.singer-name:hover {
  color: #1db954;
}

/* 固定大小，不进行响应式调整 */
</style>